<template>
  <div>
    <div class="overflow_h">
      <el-row :gutter="10">
        <el-col :span="6" v-if="init.province">
          <el-select v-model="data.province" placeholder="请选择" @change="handlerProvince">
            <el-option
              v-for="item in data.provinceData"
              :key="item.PROVINCE_CODE"
              :label="item.PROVINCE_NAME"
              :value="item.PROVINCE_CODE"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6" v-if="init.city">
          <el-select v-model="data.city" placeholder="请选择" @change="handlerCity">
            <el-option
              v-for="item in data.cityData"
              :key="item.CITY_CODE"
              :label="item.CITY_NAME"
              :value="item.CITY_CODE"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6" v-if="init.area">
          <el-select v-model="data.area" placeholder="请选择" @change="handlerArea">
            <el-option
              v-for="item in data.areaData"
              :key="item.AREA_CODE"
              :label="item.AREA_NAME"
              :value="item.AREA_CODE"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6" v-if="init.street">
          <el-select v-model="data.street" placeholder="请选择" @change="handlerStreet">
            <el-option
              v-for="item in data.streetData"
              :key="item.STREET_CODE"
              :label="item.STREET_NAME"
              :value="item.STREET_CODE"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, watch } from "@vue/composition-api";
import { cityPicker } from "@/mixins/cityPicker";

export default {
  name: "cityPicker",
  props: {
    cityPickerLevel: {
      type: Array,
      default: () => []
    },
    cityPickerData: {
      type: Object,
      default: () => {
      }
    }
  },
  setup(props, { root, emit }) {
    // 初始化省市区街区联动
    const init = reactive({
      province: false,
      city: false,
      area: false,
      street: false
    });

    const {
      // 数据集合
      data, resultData,
      // 方法
      getProvince, handlerProvince, handlerCity, handlerArea, handlerStreet
    } = cityPicker();

    /**
     * methods 方法
     */
      // 获取省份

    const initCityPick = () => {
        let initData = props.cityPickerLevel;
        if (initData.length === 0) {
          for (let key in init) {
            init[key] = true;
          }
        } else {
          initData.forEach(item => init[item] = true);
        }
      };

    /**
     * watch 监听
     */
    watch([
      () => resultData.province,
      () => resultData.city,
      () => resultData.area,
      () => resultData.street
    ], ([province, city, area, street]) => {
      emit("update:cityPickerData", resultData);
    });

    /**
     * 生命周期
     */
    onMounted(() => {
      initCityPick();
      getProvince();
    });

    return {
      data, init, handlerProvince, handlerCity, handlerArea, handlerStreet
    };

  }
};
</script>

<style scoped lang="scss"></style>


<!--
省市区街道联动组件

组件目录位置：src > components > cityPicker > index.vue
组件引用方式：import cityPicker from "@c/cityPicker";
template   <cityPicker
               :cityPickerLevel="['province', 'city', 'area', 'street']"
               :cityPickerData.sync="data.cityPickerData"
           />
参数配置：
    @param { Array } cityPickerLevel : 配置需要的数据类型
    可配置的数据："province", "city", "area", "street"

    @return { Object } cityPickerData : 返回的数据
-->
